
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute,useRouter} from 'vue-router';

const  router =useRouter()
const text=ref('')
function backClick(){
  router.go(-1);
}
function changeClick(){
    router.go(-1);
}
</script>
<template>
<main class="box">
    <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>兑换中心</span>
      <slot name="right"></slot>
  </header>
  <div class="content">
    <van-field class="field" v-model="text" placeholder="请输入兑换码" />
    <button class="login"  @click="changeClick">确认</button>
  </div>
</main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.field{
    width: 80%;
    height: 50px;
    border:  2px solid #0078d7;
    margin: 100px auto;
}
.login{
    width: 86%;
    height: 0.5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #4a73ff;
    margin: 80px 30px;
    color: white;
    font-size: 16px;
}
</style>
